<template>
  <el-dialog :append-to-body="true" :close-on-click-modal="false" :before-close="cancel" :visible.sync="dialog"
             title="扣分情况"
             append-to-body width="900px">
    <transition name="el-fade-in-linear">
    	<div class="ranking-box"  v-loading="loading">
    		<div class="top dl-row center">
    			<div class="name">操作</div>
    			<div class="timeWidth">扣分</div>
    		</div>
    		<ul class="score-main">
    			<li class="dl-row center"
    				v-for="(scoreInfo,rankIndex) in scoreInfoList"
    				:key="rankIndex">
    				<div class="name dl-row center">
    					<span>{{scoreInfo.ScoreType}}</span>
    				</div>
    				<div class="timeWidth center">
    					<span>{{scoreInfo.score}}</span>
    				</div>
    			</li>
    		</ul>
    	</div>
    </transition>
  </el-dialog>
</template>

<script>
	import initData from '@/mixins/initData'
	import { parseTime } from '@/utils/index'
	export default {
	    mixins: [initData],
      components: {},
	    data() {
        return {
          loading:false,
          dialog:false,
          bankId: '',
          scoreInfoListStr:'',
          scoreInfoList:[],
          userName:'',
          rankList:[],
          firstImg: require('../../../assets/image/first.png'),
          secondImg: require('../../../assets/image/second.png'),
          thirdImg: require('../../../assets/image/third.png'),
        }
	    },
		watch: {
		  'scoreInfoListStr': {
		    handler: function (newVal, oldVal) {
          if(newVal!=""){
            var array=eval('(' + newVal + ')');
            if(Object.prototype.toString.call(array)==='[object Array]'){
             this.scoreInfoList=array;
            }
          }
		    },
		    deep: true
		  }
		},
    created() {
      this.$nextTick(() => {
      })
    },
	    methods: {
        parseTime,
        cancel() {
          this.dialog = false
        },
	    }
	}
</script>

<style scoped>
  .ranking-box{
    background: #F6F6F6;
    border-radius: 5px 5px 5px 5px;
    padding: 20px;
    margin-top: -10px;
    .timeWidth{
      width: 20%;
      text-align: center;
    }
    .name{
      width: 80%;
      text-align: left;
      margin-left: 2%;
    }
    .top{
      color: #999999;
      line-height: 14px;
      margin-bottom: 20px;
    }
    .score-main{
      height: 250px;
      overflow:auto;
      li{
        height: 32px;
        margin-bottom: 15px;
      }
      .number{
        color: #999999;
        img{
          width: 20px;
        }
      }
      .first{
        display: flex;
        flex-direction: row;
        justify-content: center;
      }
      .name{
        img{
          width: 32px;
          height: 32px;
          margin-right: 10px;
        }
        h1{
          font-size: 14px;
          color: #333333;
          margin-right: 10px;
        }
        p{
          background: #FFFFFF;
          border-radius: 13px 13px 13px 13px;
          padding: 0 15px;
          color: #0068B6;
          font-size: 12px;
          line-height: 26px;
        }
      }
      .user-score{
        font-size: 14px;
        font-weight: bold;
        color: #333333;
        padding-left: 20px;
      }
    }
  }
  .dl-row {
    display: flex;
    flex-direction: row;
    }
    .number img{
      width: 20px;
      height: 20px;
    }
     .score-main li{
      height: 22px;
      margin-bottom: 10px;
    }
</style>
